<template>
  <el-container class="history-main">
    <el-header style="margin-top: 4vh; margin-bottom: -3vh"> </el-header>
    <el-main>
      <div class="repair-group activity-record" v-cloak>
        <el-alert
          v-if="recordLength > 0"
          :title="`共计 ${recordLength} 条记录`"
          type="info"
          show-icon
        ></el-alert>

        <el-list>
          <el-list-item
            v-for="item in recordList"
            :key="item.id"
            class="record-item"
          >
            <div class="row">
              <el-image
                :src="'http://127.0.0.1:8090/' + item.resData.data.outline"
                style="max-width: 150px; max-height: 150px"
                lazy
              />
              <span>{{ item.bmsj }}</span>
              <span class="time">
                <el-tag :type="getStatusType(item.state)" class="record-status">
                  {{ item.state }}
                </el-tag>
              </span>
            </div>
            <div class="part">
              <div class="msg-item">
                <i>用户：</i><span>{{ item.name }}</span>
              </div>
              <div class="msg-item">
                <i>提交时间：</i><span>{{ item.submitTime }}</span>
              </div>
              <div v-if="item.state === '已完成'" class="msg-item">
                <i>完成时间：</i><span>{{ item.finishTime }}</span>
              </div>
              <div v-if="item.state === '已取消'" class="msg-item">
                <i>取消时间：</i><span>{{ item.cancelTime }}</span>
              </div>
            </div>
          </el-list-item>
        </el-list>

        <div class="no-record" v-if="recordLength < 1">
          <!-- <el-alert title="暂无检测记录！" type="warning" show-icon></el-alert> -->
          <el-empty description="暂无检测记录！" />
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script setup>
import { ref } from "vue";

const src =
  "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg";
const recordLength = ref(4); // 示例数据
const recordList = ref([
  {
    id: 1,
    resData: {
      data: {
        outline: "output/outline/62905112.png",
        prediction: "output/prediction/62905112.png",
      },
      points: [
        {
          label: "\u533a\u57df1",
          x_ratio: 0.38347,
          y_ratio: 0.47019,
        },
        {
          label: "\u533a\u57df2",
          x_ratio: 0.58266,
          y_ratio: 0.44444,
        },
        {
          label: "\u533a\u57df3",
          x_ratio: 0.30081,
          y_ratio: 0.23984,
        },
      ],
      state: 200,
    },
    name: "张三",
    state: "已完成",
    submitTime: "2024-09-01 10:00:00",
    finishTime: "2024-09-01 10:00:03",
  },
  {
    id: 2,
    resData: {
      data: {
        outline: "output/outline/64668526.png",
        prediction: "output/prediction/64668526.png",
      },
      points: [
        {
          label: "\u533a\u57df1",
          x_ratio: 0.48509,
          y_ratio: 0.6748,
        },
        {
          label: "\u533a\u57df2",
          x_ratio: 0.95528,
          y_ratio: 0.57317,
        },
      ],
      state: 200,
    },
    name: "李四",
    state: "已完成",
    submitTime: "2024-09-01 13:00:00",
    finishTime: "2024-09-01 14:00:10",
  },
  {
    id: 3,
    resData: {
      data: {
        outline: "output/outline/01391089.png",
        prediction: "output/prediction/01391089.png",
      },
      points: [
        {
          label: "\u533a\u57df1",
          x_ratio: 0.46612,
          y_ratio: 0.85501,
        },
        {
          label: "\u533a\u57df2",
          x_ratio: 0.84553,
          y_ratio: 0.76965,
        },
        {
          label: "\u533a\u57df3",
          x_ratio: 0.9878,
          y_ratio: 0.50949,
        },
        {
          label: "\u533a\u57df4",
          x_ratio: 0.99322,
          y_ratio: 0.49187,
        },
        {
          label: "\u533a\u57df5",
          x_ratio: 0.98645,
          y_ratio: 0.39702,
        },
        {
          label: "\u533a\u57df6",
          x_ratio: 0.84553,
          y_ratio: 0.12331,
        },
      ],
      state: 200,
    },
    name: "李四",
    state: "检测中",
    submitTime: "2024-09-01 10:00:00",
    finishTime: "2024-09-01 10:00:10",
  },
]); // 示例数据

const getStatusType = (state) => {
  switch (state) {
    case "已取消":
      return "danger";
    case "检测中":
      return "warning";
    case "已完成":
      return "success";
    default:
      return "";
  }
};
</script>

<style scoped>
.repair-group {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.el-alert {
  margin-bottom: 20px;
}

.record-item {
  background-color: #ffffff;
  border: 1px solid #eaeaea;
  border-radius: 8px;
  padding: 25px;
  margin-bottom: 15px;
  display: flex;
  flex-direction: column; /* 使用列布局 */
  transition: box-shadow 0.2s ease;
}

.record-item:hover {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
}

.time {
  font-weight: bold;
}

.record-status {
  font-size: 14px;
  padding: 5px 10px;
}

.part {
  display: flex;
  flex-wrap: wrap; /* 增加换行 */
  margin-top: 10px;
}

.msg-item {
  display: flex;
  align-items: center;
  margin-right: 20px; /* 添加右边距以分隔项 */
  margin-bottom: 5px;
  font-size: 14px;
}

.msg-item i {
  color: #888;
  margin-right: 5px;
  font-weight: bold;
}

.no-record {
  text-align: center;
  margin-top: 20px;
}
</style>
